Page Designer

Page designer features

After creating a web page, the Page Designer is used to add content to the page.

Select the new page and click Edit. The page designer opens with an empty layout .

Note | If you open an existing page from a web application version that is published, you can view only, and not make any changes. To make changes you need to unpublish the version first.

The designer has five main features:

Page layout area: you drag and drop controls from the toolbox onto the layout area to provide functions in the page.

Control toolbox: a list of controls you can add to a page, grouped into Common, Component, and Layout categories.

Properties list: displays the properties for the selected component (control or layout). You adjust the properties to customise the component's appearance, behaviour, and so on. A drop-down list above the Properties list provides a way to select a particular component, or you can select a component from the page layout area.

When a control (but not the Layout) is selected, a Delete button appears at the top of the Properties list. You cannot delete the Layout.

Page menu: the page menu provides these facilities:

  • Preview code: you can examine and copy the page HTML and JavaScript code. No editing is possible.
  • Design preview: you can use this option for testing, to launch the web page in a new browser tab with near full functionality. This is much faster than publishing the application and running it from the dashboard. For Mobile devices you have to publish the web app and access it through the dashboard on the mobile device.
  • Page JavaScript: launches the JavaScript editor to add JavaScript to the web page (to add JavaScript to all web app pages in the web app, edit the Global JavaScript in the web app version).
  • Save page: saves the page layout and controls. In addition, any page JavaScript must be saved using the Save JavaScript button.
  • Full screen: hides the main menu and top status line to maximise space for the page designer.
  • Save JavaScript: saves the page JavaScript. You must use this in addition to Save page if you add or change the page JavaScript.

Page selector: you can select a new page for editing from this drop-down list without going back to the Version Edit page.